<template>
  <Modal v-model="modal" :title="id ? '编辑服务分类' : '新建服务分类'">
    <div>
      <Form :model="form" :label-width="100" :rules="rules" ref="form">
        <FormItem label="服务分类名称" prop="name">
          <Input :maxlength="5" v-model="form.name" placeholder="最多5个字"/>
        </FormItem>
        <FormItem label="图片" prop="imgUrl">
          <Input v-show="form.isImg" :maxlength="5" v-model="form.imgUrl"/>
          <PictureEditItem :uploadList="uploadList" :maxlength="1" @uploadPic="uploadPic"></PictureEditItem>
        </FormItem>
        <FormItem label="类型">
          <template v-if="id">
            <span>{{form.serverType === 'STORE' ? '到店服务' : '上门服务'}}</span>
          </template>
          <template v-else>
            <RadioGroup v-model="form.serverType">
              <Radio label="STORE">到店服务</Radio>
              <Radio label="SERVER_VISIT">上门服务</Radio>
            </RadioGroup>
          </template>
        </FormItem>
        <FormItem label="是否启用">
          <Checkbox label="是否启用" v-model="form.isEnabled"></Checkbox>
        </FormItem>
        <FormItem label="排序">
          <InputNumber :max="999999" :min="0" v-model="form.orderNum"/>
        </FormItem>
        <Loader :status="form.status"></Loader>
      </Form>
    </div>
    <div slot="footer">
      <Button class="mr" size="large" @click="modal = false">取消</Button>
      <Button type="primary" :disabled="btnDisabled" size="large" @click="onSave">确定</Button>
    </div>
  </Modal>
</template>
<script>
import PictureEditItem from '@/components/PictureEditItem'
export default {
  components: {
    PictureEditItem
  },
  data () {
    return {
      id: '',
      modal: false,
      btnDisabled: false,
      uploadList: [],
      form: {
        name: '',
        imgUrl: '',
        serverType: '',
        orderNum: null,
        isEnabled: false,
        status: 'pass',
        isImg: false
      },
      rules: {
        name: [{ required: true, message: '请输入服务项目名称', min: 2, trigger: 'blur'}],
        imgUrl: [{ required: true, message: '图片不能为空', trigger: 'change'}]
      }
    }
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields()
      this.id = ''
      this.uploadList = []
      this.btnDisabled = false
      this.form = {
        name: '',
        isEnabled: true,
        serverType: 'STORE',
        orderNum: 0,
        imgUrl: ''
      }
    },
    updateForm(id) {
      this.resetForm()
      this.id = ''
      if (id) {
        this.getData(id)
      } else {
        this.openModal()
      }
    },
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    uploadPic(val) {
      this.form.imgUrl = val.length > 0 ? val[0].imgUrl : ''
    },
    getData(id) {
      this.id = id
      this.$ajaxGet('/server/server_category/detail/' + id).then(data => {
        this.form = {
          name: data.name,
          isEnabled: data.isEnabled,
          orderNum: data.orderNum,
          serverType: data.serverType,
          imgUrl: data.imgUrl
        }
        this.uploadList = data.imgUrl ? [{
          imgUrl: data.imgUrl,
          status: 'finished'
        }] : []
        this.openModal()
      })
    },
    onSave() {
      if (this.form.status === 'loading') return
      this.$refs.form.validate(valid => {
        if (valid) {
          let text = this.id ? '编辑' : '新增'
          let url = 'server/server_category/save'
          let param = {
            name: this.form.name,
            imgUrl: this.form.imgUrl,
            isEnabled: this.form.isEnabled,
            orderNum: this.form.orderNum,
            serverType: this.form.serverType
          }
          if (this.id) param.id = this.id
          this.form.status = 'loading'
          this.btnDisabled = true
          this.$jsonPost(url, param).then(data =>{
            this.$emit('complete')
            this.closeModal()
            this.$Notice.success({
              title: text + '成功'
            })
            this.form.status = 'pass'
          }).catch(() => {
            this.closeModal()
            this.$Notice.error({
              title: text + '失败'
            })
            this.btnDisabled = false
          })
        } else {
          this.btnDisabled = false
        }
      })
    }
  }
}
</script>